﻿@{
    Layout = null;
    var navId = ViewBag.buttonId;
    var moduleId = ViewBag.moduleId;
}
<!--导航-->
<link href="~/Content/CommonCss/layer/skin/default/layer.css" rel="stylesheet" />
<script src="~/Content/CommonCss/layer/layer.js"></script>

<style>
    .padding
    {
        padding: 20px 20px 0 20px;
    }

    #form1 tr td
    {
        padding: 5px;
    }

    table td
    {
        border: 0px;
    }

    table
    {
        font-size: 12px;
        line-height: 35px;
    }

    .tdtxt
    {
        text-align: right;
        width: 100px;
    }

    .tdbox
    {
        text-align: left;
        width: 200px;
    }

    .pagebreak
    {
        page-break-after: always;
    }

    .jumbotron img
    {
        width: 100%;
        height: auto;
    }

    /*.NavAction
    {
        display: block;
    }*/

</style>



<style>
    .module_icon_box
    {
        width: 504px;
        background: #FFF;
        border: 1px solid #ccc;
        border-radius: 5px;
        z-index: 999999999;
    }

    .icon_check_nav
    {
        position: relative;
        width: 98%;
        height: 45px;
        margin: 5px;
        background-color: #e4e5e5;
        border-radius: 4px 4px 0 0;
        -webkit-border-radius: 4px 0;
        -moz-border-radius: 4px 0;
        border-bottom: 1px solid #d4d4d4;
        z-index: 1;
    }

    .module_icon_box img
    {
        float: left;
        margin: 5px;
        width: 40px;
        height: 40px;
        background: #eee 4px no-repeat;
        background-size: 32px 32px;
        border-radius: 3px;
        padding: 5px;
    }

    img:hover
    {
        background-color: yellow;
    }

    #navList div
    {
        display: inline-block;
    }

    #ico
    {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

    .layui-layer.layui-layer-page.layer-anim
    {
        top: 200px !important;
        left: 0 !important;
    }
    /*webuploader*/
    #picker1 > div:nth-child(2)
    {
        display: none;
    }

    .webuploader-element-invisible
    {
        opacity: 0;
    }
</style>
<form id="ButtonForm">
    <div class="form-group RowAlgnTop">
        <input type="hidden" id="ButtonId" name="ButtonId" value="@navId" />
        <input type="hidden" id="DataId" name="DataId" value="@navId" />
        <input type="hidden" id="ModuleId" name="ModuleId" value="@moduleId" />

        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">名称:</div>
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
            <input class="form-control" type="text" id="Name" name="Name" value="">
        </div>
    </div>
    <div class="form-group RowAlgnTop">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">图标:</div>
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
            <div style="width:80px; height:60px; line-height:60px;">
                <a class="mini-button" href="javascript:void(0)">
                    <span class="mini-button-text ">
                        <img id="ico" src="~/Content/CommonCss/miniui/themes/icons/cc/1.png" />
                        <input type="hidden" name="IcoUrl" id="IcoUrl" value="/Content/CommonCss/miniui/themes/icons/cc/1.png" />
                    </span>
                </a>
            </div>
            <label class="btn btn-primary margin-top-10" id="picker1">上传自定义图标</label>
        </div>
    </div>
    <div class="form-group RowAlgnTop">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">动作:</div>
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 text-center">
            <label class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <input type="radio" name="Link" value="0" style="display:block;margin:0 auto" />
                <span style="display: block; white-space: nowrap; ">防伪</span>
            </label>

            <label class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <input type="radio" name="Link" value="1" style="display:block;margin:0 auto" />
                <span style="display: block; white-space: nowrap; ">溯源</span>
            </label>

            <label class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <input type="radio" name="Link" value="2" checked style="display:block;margin:0 auto" />
                <span style="display: block; white-space: nowrap; ">连接</span>
            </label>

            <label class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <input type="radio" name="Link" value="3" style="display:block;margin:0 auto" />
                <span style="display: block; white-space: nowrap; ">认证库</span>
            </label>
        </div>
    </div>

    <div>
        <div class="form-group RowAlgnTop NavAction" style="display:none">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">链接:</div>
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                <input class="form-control" type="text" id="BindValue" name="BindValue" value="">
            </div>
        </div>
    </div>

    <div id="icobox" class="module_icon_box dno" style="display:none;top:0;left:0">
        <div class="block_icon1 block_check" style="display: block;">
            <img src="~/Content/webImgs/TraceSource/Ico/1.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/2.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/3.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/4.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/5.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/6.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/7.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/8.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/rztb_01.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/rztb_02.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/rztb_03.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/rztb_04.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/ds_jd.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/ds_tmall.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/ds_tmallsc.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/ds_yhd.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/qcsy_nyhfxq.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/qcsy_qcjk.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/qcsy_qycj.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/qcsy_sclc.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/qcsy_zjbg.png" />
            <img src="~/Content/webImgs/TraceSource/Ico/qcsy_zzlc.png" />
        </div>

        <div class="cl">
        </div>
    </div>
    @*<input type="hidden" id="BindValue" name="BindValue" />*@
</form>



<script>
    $("#ico").click(function () {
        layer.open({
            type: 1,
            shade: false,
            title: false, //不显示标题
            shadeClose: true, //点击遮罩关闭层
            area: ['auto', 'auto'],
            content: $('#icobox'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    });

    $("#icobox img").on("click", function (e) {
        var src = e.currentTarget.attributes["0"].nodeValue;
        $("#ico").attr("src", src);
        $("#IcoUrl").val(src);
        layer.closeAll();
    });



    $(function () {

        var uploader1 = WebUploader.create({
            // swf文件路径
            //swf: BASE_URL + '/js/Uploader.swf',
            // 文件接收服务端。
            server: 'OriginsMaterial/Upload',
            // 选择文件的按钮。可选。 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id: '#picker1',
                multiple: false
            },
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });



        function LoadItem_NavEdit(item, selector) {

            item.on('fileQueued', function (file) {

                item.upload();
            });


            item.on('uploadSuccess', function (file, r) {

                var result = r._raw.split("。")[1];
                $("#ico").attr("src", result);
                $("#IcoUrl").val(result);


            });

            item.on('uploadError', function (file) {

                $.L.msgError("上传出错");
            });


        }


        LoadItem_NavEdit(uploader1, "#picker1");


    });


    $(document).ready(function () {
        var buttonId = $("#ButtonId").val();
        Button.BindModelToButtonEdit(buttonId);
    });


    $("input[name='Link']").on("click", function () {
        var index = $("input[name='Link']").index($(this));
        //console.log(index)
        if (index == 3) {

            Button.Dialog_SelectAuthList();

        }
        index == 2 ? $(".NavAction").show() : $(".NavAction").hide()
    })

</script>
